<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>axios的GET请求带参数的形式</h2>
    省份<input type="text"  name="province" value="河南省"/>
    城市<input type="text" name="city" value="郑州市"/>

    <button>测试</button>

    <ul class="list">
       
    </ul>

    <script src="./js/axios.js"></script>

    <script>
        const but = document.querySelector('button');
        const province = document.querySelector('input[name=province]');
        const city = document.querySelector('input[name=city]');

        const list = document.querySelector('.list');

        but.addEventListener('click',async function(){
            const pname = province.value
            const cname = city.value
            const {data:res} = await axios({
                url:'http://ajax-api.itheima.net/api/area',
                method:'GET',
                params:{
                    pname,
                    cname
                }
            })
               
            const {data} = res
            list.innerHTML = data.map(item=>{
            return `<li>${item}</li>`
            }).join('')
            
        })


    </script>

    
</body>
</html>